<script setup>
import HomePanel from './HomePanel.vue';
import { onMounted, ref } from 'vue';
import { getHotAPI } from '@/apis/home';

const hotList = ref([]);
async function getHotList() {
	const res = await getHotAPI();
	hotList.value = res.result;
	// hotList.value = [
	// 	{
	// 		id: 'hot1',
	// 		picture: 'https://img.icons8.com/clouds/300/audio-wave.png',
	// 		title: '无线降噪耳机',
	// 		alt: '主动降噪 30小时续航',
	// 		price: '¥899'
	// 	},
	// 	{
	// 		id: 'hot2',
	// 		picture: 'https://img.icons8.com/clouds/300/retro-tv.png',
	// 		title: '迷你投影仪',
	// 		alt: '1080P高清 便携设计'
	// 	},
	// 	{
	// 		id: 'hot3',
	// 		picture: 'https://img.icons8.com/clouds/300/smartwatch.png',
	// 		title: '智能运动手表',
	// 		alt: '血氧心率监测'
	// 	},
	// 	{
	// 		id: 'hot4',
	// 		picture: 'https://img.icons8.com/clouds/300/airport-baggage.png',
	// 		title: '旅行收纳套装',
	// 		alt: '6件套 防水材质'
	// 	}
	// ];
}
onMounted(() => {
	getHotList();
});
</script>

<template>
	<HomePanel title="人气推荐" sub-title="人气爆款 不容错过">
		<ul class="goods-list">
			<li v-for="item in hotList" :key="item.id">
				<RouterLink to="/">
					<img v-img-lazy="item.picture" alt="">
					<!-- <img :src="item.picture" alt=""> -->
					<p class="name">{{ item.title }}</p>
					<p class="desc">{{ item.alt }}</p>
				</RouterLink>
			</li>
		</ul>
	</HomePanel>
</template>

<style scoped lang='scss'>
.goods-list {
	display: flex;
	justify-content: space-between;
	height: 426px;

	li {
		width: 306px;
		height: 406px;
		transition: all .5s;

		&:hover {
			transform: translate3d(0, -3px, 0);
			box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
		}

		img {
			width: 306px;
			height: 306px;
		}

		p {
			font-size: 22px;
			padding-top: 12px;
			text-align: center;
		}

		.desc {
			color: #999;
			font-size: 18px;
		}
	}
}
</style>